<template>
    <div>
      <!-- 代理详情 -->
      <div style="width: 100%; ">
        <div style=" border: 1px solid #ccc; width: 98%; margin: 0 auto;">
            <el-divider></el-divider>
            <div class="back">
            <div style="margin: 18px 20px; font-weight: 700;">基本信息</div>
            <div>
              <el-button icon="el-icon-arrow-left" type="primary" @click="go"
                >返回</el-button
              >
            </div>
          </div>
          <el-divider></el-divider>
          <div class="fish-box">
          <el-form ref="fishInfo" :model="fishInfo" label-width="105px">
            <el-form-item
              label="用户头像  :"
              style="display: flex; align-items: center; "
            >
              <div
                style="background-color: #ccc; "
                v-if="fishInfo.sysUser.avatarUrl == ''"
              >
                <img
                  src="../../../assets/images/username.png"
                  style="width: 100px; height: 100px;  vertical-align: middle;"
                  alt=""
                />
              </div>
              <div
                style="background-color: #ccc;"
                v-if="fishInfo.sysUser.avatarUrl"
              >
                <img
                  :src="fishInfo.sysUser.avatarUrl"
                  style="width: 100px; height: 100px;  vertical-align: middle;"
                  alt=""
                />
              </div>
            </el-form-item>
            <el-form-item label="用户手机号  :" >
              <el-input
                v-model="fishInfo.sysUser.phoneNumber"
                disabled
                style="width: 322px; text-align: center;"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户ID  :" >
              <el-input
                v-model="fishInfo.sysUser.id"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名  :" >
              <el-input
                v-model="fishInfo.sysUser.realName"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="昵称  :" >
              <el-input
                v-model="fishInfo.sysUser.nickName"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="注册时间  :" >
              <el-input
                v-model="fishInfo.sysUser.createTime"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证号  :" >
              <el-input
                v-model="fishInfo.sysUser.idCard"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="生日  :" >
              <el-input
                v-model="fishInfo.sysUser.birthDay"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="最后上线时间时间  :"
              
            >
              <el-input
                v-model="fishInfo.userExtra.lastLoginTime"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱  :" >
              <el-input
                v-model="fishInfo.userExtra.email"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="代理等级  :"  >
              <div v-if="fishInfo.fishPartyAgentLevel == 1" style="text-align: center;">
                市级代理
              </div>
              <div v-if="fishInfo.fishPartyAgentLevel == 2" style="text-align: center;">
                省级代理
              </div>
            </el-form-item>
            <el-form-item label="代理上级  :" >
              <div v-if="fishInfo.fishPartyAgentLevel == 0" style="text-align: center;"> 
                暂无代理
              </div>
              <div v-if="fishInfo.fishPartyAgentLevel ==1 " style="text-align: center;">
               {{fishInfo.fishPartyAgentSuperiorId }}
              </div>
              <div v-if="fishInfo.fishPartyAgentLevel ==2 " style="text-align: center;">
                深圳市聪明鱼智能科技股份有限公司
              </div>
            </el-form-item>
          </el-form>
        </div>
        </div>
        <!-- 我的客户表格 -->
        <div
          style="border: 1px solid #ccc; width: 98%; margin: 0 auto;"
     
        >
          <!-- 表格 -->
          <el-table border :data="agentInfo" style="width: 100%" align="center">
            <el-table-column
              prop="customUserId"
              label="客户ID"
              align="center"
            ></el-table-column>
          
            <el-table-column
              prop="customNickName"
              label="客户昵称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="成为客户时间"
              align="center"
            ></el-table-column>
           
        
            <el-table-column label="成交状态" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.transactionFlag == 1">
                  待成交
                </div>
                <div v-if="scope.row.transactionFlag == 2">
                  已成交
                </div>
                
              </template>
            </el-table-column>
            <el-table-column
              prop="lockExpiryDate"
              label="锁定期限"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="lockExpiryDate"
              label="收益"
              align="center"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="examineClick(scope.row)"
                  type="primary"
                  size="small"
                  >查看</el-button
                >
                <el-button v-if="scope.rowtransactionFlag==1"  @click="statusClick(scope.row)" type="danger" size="small">解除锁定</el-button>
                              <!-- <el-button  v-permission="['fishParty:list:delete']" @click="editClick(scope.row)" type="text" size="small">删除</el-button>  -->
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top:15px;">
            <el-pagination
              align="center"
              @size-change="handleSizeChanges"
              @current-change="handleCurrentChanges"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSizes"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="totals"
            >
            </el-pagination>
          </div>
        </div>
       
      </div>
    </div>
  </template>
  <script>
  import { editSysUserDetail,agentCustomer,relieveCustomerLock} from "@/api/user";
  import { Toast } from "vant";
  export default {
    data() {
      return {
        currentPages: 1, //当前页数
        pageSizes: 10, //每页条数
        totals: 0, //总条目数
        userId: "", //用户ID
        agentInfo:[], // 我的客户数据信息
        fishInfo:{}
      };
    },
    created() {
      this.userId = this.$route.query.e;
      this.editSysUserDetail();
      this.agentCustomer(this.pageSizes, this.currentPages);
    },
    methods: {
       // 返回
       go(){
        this.$router.go(-1)
    },
      // 解除我的客户锁定
    async  statusClick(e){
        let data={
          agentUserId:e.agentUserId,
          customerUserId:e.customUserId
        }
        let result = await relieveCustomerLock(data)
        if(result.code==0){
          Toast.success('解除客户锁定成功')
          this.agentCustomer(this.pageSizes, this.currentPages);
        }
      },
      // 查看我的客户详情
         examineClick(v) {
          let e = v.agentUserId
        this.$router.push({ path: "examine", query: { e } });
      }, // 删除用户
      // 我的客户分页
    async  agentCustomer(){
        let data={
          limit: this.pageSizes,
          page: this.currentPages,
          userId: this.userId,
          customerType:0,
          agentId:0
        }
        let result = await agentCustomer(data)
        if(result.code==0){
          this.agentInfo = result.data.records
        }
      },
        // 编辑
        editClick(e){
              let fishPartyId = e.fishPartyId
              let orderId = e.orderId
              this.$router.push({path:'/editFish',query: { fishPartyId, orderId } })
          },
       //每页条数改变时触发 选择一页显示多少行
       handleSizeChanges(val) {
        this.currentPages = 1;
        this.pageSizes = val;
        this.editFishParty(this.pageSizes, this.currentPages);
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChanges(val) {
        this.currentPage = val;
        this.editFishParty(this.pageSizes, this.currentPages);
      },
      async editSysUserDetail() {
        let data = {
          userId: this.userId
        };
        let result = await editSysUserDetail(data);
        if (result.code == 0) {
          this.fishInfo = result.data;
        }
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  ::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #070707;
  cursor: not-allowed;
  text-align: center;
}
  .back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 20px;
}
  .btn {
    display: flex;
    margin: 20px 20px;
  }
  .fish-sprout {
    border: 1px solid #000;
    width: 500px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .fish {
    border: 1px solid #ccc;
    width: 98%;
    height: 350px;
    margin: 30px 24px;
  }
  
  .fish-info {
    margin-left: 5px;
    height: 25px;
  }
  .sprout-box {
    display: flex;
    align-items: center;
    margin: 50px 20px;
  }
  .fish-boxs {
    display: flex;
    align-items: center;
    margin: 36px 15px;
  }
  
  .fish-box {
    display: flex;
    margin: 30px 24px;
    width: 98%;
  }
  .fish-box1 {
    display: flex;
    margin: 30px 24px;
    width: 98%;
  }
  th {
    background: #d7d7d7;
    color: #454545;
  }
  .portait-table1 {
    border-collapse: collapse;
    border: none;
    width: 100%;
  
    td {
      border: 1px solid #d7d7d7;
      height: 40px;
      padding-left: 10px;
      color: #333;
      width: 100px;
      text-align: center;
  
      &:nth-child(odd) {
        //   background: #d7d7d7;
        color: #454545;
      }
    }
  }
  .portait-table {
    border-collapse: collapse;
    border: none;
    width: 100%;
  
    td {
      border: 1px solid #f3f3f3;
      height: 40px;
      padding-left: 10px;
      color: #333;
      // width: 100px;
      text-align: center;
  
      &:nth-child(odd) {
        background: #d7d7d7;
        color: #454545;
      }
    }
  
    .edit {
      border: 1px solid rgb(121, 27, 27);
      width: 180px;
    }
  
    .edit-img {
      width: 180px;
      height: 50px;
    }
  }
  </style>
  